<template>
    <div>
        <!-- 关注对象 -->
        <div class="bg-#3f3f3f px-11px pt-12px">
            <div class="text-13px text-#fff font-bold mb-16px">
                - 关注对象
            </div>
            <div class="flex gap-12px overflow-x-auto h-113px">
                <div v-for="(item, index) in interestUser" :key="item.name"
                     :class="['relative w-88px h-88px', { 'active': activeUser === index }]" @click="activeUser = index">
                    <img src="@/assets/fllow.webp" alt="" class="w-88px">
                    <div class="absolute bottom-10px left-50% -translate-x-50% text-center whitespace-nowrap flex flex-col ">
                        <span class="text-#fff text-9px lh-1em mb-3px">{{ item.name }}</span>
                        <span class="text-#a4a4a4 text-7px lh-12px">·已注册{{ item.day }}天</span>
                        <span class="text-#a4a4a4 text-7px lh-1em">·已玩游戏{{ item.game }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 帖子列表 -->
        <div class="bg-#6a6a6a py-18px px-15px space-y-10px">
            <div v-for="item in 5" :key="item" class="part-wrap">
                <div class="part" :style="{
                    height: isUnfold_discuss ? 'fit-content' : '280px',
                }">
                    <div class="item-top">
                        <div class="top">
                            <div class="top-tag">
                                <span>NEW</span>
                            </div>
                            <div>
                                <div class="comment">
                                    <img src="@pages/game-detail/images/comment.webp" alt="">
                                    <span>3,383</span>
                                </div>
                                <div class="praise">
                                    <img src="@pages/game-detail/images/praise-white.webp" alt="">
                                    <span>12k</span>
                                </div>
                                <div class="praise">
                                    <span>回复</span>
                                </div>
                                <div class="praise">
                                    <span>关注此人</span>
                                </div>
                            </div>
                        </div>
                        <div class="item-content">
                            <div class="left">
                                <div>
                                    <img src="@pages/game-detail/images/avatar.webp" alt="">
                                    <div>
                                        <div>黄油小郎君</div>
                                        <div class="tag">
                                            · 已注册188天
                                        </div>
                                        <div class="tag">
                                            · 已玩游戏78
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <nut-button> #平台指南</nut-button>
                                    <nut-button> #LUST GODDESS</nut-button>
                                </div>
                            </div>
                            <div class="right">
                                <div class="con">
                                    看在色色女角的份上還是繼續玩了，官方請快開發一個安卓手機也能玩
                                    STEAMI的APP吧！
                                    <br>
                                    ----------
                                    <br>
                                    花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善，你不花錢就永遠卡在20級聯盟左右，而且勝場只有30點敗場就扣60點的設計也相當差。
                                    看在色色女角的份上還是繼續玩了，官方請快開發一個安卓手機也能玩
                                    STEAMI的APP吧！ -----
                                </div>
                                <div class="pic-list">
                                    <img v-for="item in 10" :key="item" src="@pages/game-detail/images/game-con.webp"
                                         alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-for="item in 5" :key="item" class="item">
                        <div style="width: 100px; flex-shrink: 0"></div>
                        <div class="right">
                            <div class="top">
                                <div>
                                    <img src="@pages/game-detail/images/avatar.webp" alt="" class="translate-y-[-5px]">
                                    <div class="flex flex-col">
                                        <span class="text-12px lh-14px mb-3px">黄油小郎君</span>
                                        <span class="text-8px lh-12px text-#a4a4a4">· 已注册188天</span>
                                        <span class="text-8px lh-12px text-#a4a4a4">· 已玩游戏78</span>
                                    </div>
                                </div>
                                <div class="flex gap-5px">
                                    <div class="flex items-center gap-3px">
                                        <img src="@pages/game-detail/images/comment.webp" alt=""
                                             class="!w-10px translate-y-1px">
                                        <span class="text-10px">3,383</span>
                                    </div>
                                    <div class="praise">
                                        <img src="@pages/game-detail/images/praise-white.webp" alt="">
                                        <span>12k</span>
                                    </div>
                                    <div class="praise">
                                        <span>回复</span>
                                    </div>
                                    <div class="praise">
                                        <span>关注此人</span>
                                    </div>
                                </div>
                            </div>
                            <div class="con">
                                <div>
                                    ※引述《黄油小郎君》之銘言看在色色女角的份上還是續玩了，官方請快開發一個安卓手機也能玩STEAM的APP吧！
                                </div>
                                <div>
                                    花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善。
                                </div>
                            </div>
                            <div class="pic-list">
                                <img v-for="item in 10" :key="item" src="@pages/game-detail/images/game-con.webp"
                                     alt="">
                            </div>
                        </div>
                    </div>

                    <!-- 留言 -->   
                    <div class="flex gap-5px"
                         style="border-bottom: solid 1px #595959">
                        <div style="width: 100px; flex-shrink: 0"></div>
                        <div class="bg-#fff w-full overflow-hidden mt-15px mb-18px rounded-5px">
                            <nut-input v-model="val"
                                       placeholder="Placeholder"
                                       class="w-full text-red"></nut-input>
                            <div class="flex bg-#3c3c3c px-9px py-5px gap-4px">
                                <img src="../images/crtp.webp" alt="" class="w-70px">
                                <img src="../images/scxp.webp" alt="" class="w-70px">
                                <img src="../images/bqfh.webp" alt="" class="w-70px">
                            </div>
                            <div class="flex items-center justify-center py-10px gap-6px">
                                <nut-button class="!w-fit !h-28px !text-12px !text-#fff !border-none !bg-#339ede">
                                    取消留言
                                </nut-button>
                                <nut-button class="!w-fit !h-28px !text-12px !text-#fff !border-none !bg-#eb49a8">
                                    送出回复
                                </nut-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="read-more" @click="isUnfold_discuss = !isUnfold_discuss">
                    <span>{{
                        isUnfold_discuss ? "收起帖子" : "展开帖子"
                    }}</span>
                    <div class="triangle" :class="isUnfold_discuss && 'rotate-180deg'"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const interestUser = [
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' }
]
const activeUser = ref(0)
const isUnfold_discuss = ref(false) // 是否展开
</script>

<style scoped lang="scss">
.active {
    &::after {
        content: '';
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 12px 7px 12px 7px;
        border-style: solid;
        border-color: #131313 transparent transparent transparent;
    }
}

.part-wrap {
    border: solid 1px #6d6d6d;
    border-radius: 5px;
    background: #3c3c3c;
    color: #fff;

    .part {
        padding: 10px;
        overflow: hidden;

        .item-top {
            padding-bottom: 10px;
            border-bottom: solid 1px #595959;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .top-tag {
                    background: url(../../game-detail/images/top-bg.webp);
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80px;
                    height: 20px;
                    font-size: 12px;
                    font-weight: bold;
                    transform: translate(18px, -11px);
                    gap: 5px;

                    img {
                        width: 16px;
                    }
                }

                &>div:last-child {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    gap: 5px;
                    margin-bottom: 5px;

                    img {
                        width: 12px;
                    }

                    .praise,
                    .comment {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 10px;
                        line-height: 10px;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        padding: 7px 8px 5px;
                    }

                    .comment {
                        margin-right: 5px;

                        img {
                            transform: translateY(1px);
                        }
                    }
                }
            }

            .item-content {
                display: flex;
                align-items: start;
                justify-content: space-between;
                gap: 5px;

                .left {
                    flex-shrink: 0;
                    width: 100px;

                    &>div:first-child {
                        display: flex;
                        align-items: start;
                        gap: 5px;

                        img {
                            width: 30px;
                        }

                        &>div {
                            font-size: 12px;

                            .tag {
                                font-size: 8px;
                                color: #a4a4a4;
                                line-height: 14px;
                            }
                        }
                    }

                    &>div:last-child {
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 10px;
                        margin-top: 20px;

                        .nut-button {
                            background: #339ede;
                            border: none;
                            color: #fff;
                            height: 18px;
                            font-size: 8px !important;
                            padding: 0 5px;
                        }
                    }
                }

                .right {
                    margin-top: 5px;
                    flex: 1;
                    overflow: hidden;

                    .con {
                        font-size: 10px;
                        line-height: 16px;
                    }

                    .pic-list {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        overflow-x: auto;
                        margin-top: 20px;

                        img {
                            width: 120px;
                        }
                    }
                }
            }
        }

        .item {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 5px;
            padding: 10px 0;
            border-bottom: solid 1px #595959;

            .right {
                flex: 1;
                overflow: hidden;

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    white-space: nowrap;

                    &>div {
                        display: flex;
                        align-items: center;
                    }

                    &>div:first-child {
                        gap: 5px;
                    }

                    img {
                        width: 22px;
                    }

                    .tag {
                        font-size: 8px;
                        color: #a4a4a4;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        line-height: 1em;
                        font-size: 8px;
                        padding: 5px 6px;

                        img {
                            width: 9px;
                        }
                    }
                }

                .con {
                    font-size: 12px;
                    line-height: 16px;

                    &>div:first-child {
                        color: #8b8b8b;
                        margin: 10px 0;
                    }
                }

                .pic-list {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    overflow-x: auto;
                    margin-top: 20px;

                    img {
                        width: 120px;
                    }
                }
            }
        }
    }

    .read-more {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        gap: 5px;
        margin: 0px 20px 0 20px;
        padding: 5px 0;
        font-size: 13px;

        .triangle {
            width: 0;
            height: 0;
            border-top: 8px solid #339ede;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }
}

:deep(.nut-input) {
    padding: 6px 8px;
    height: 100px;

    .input-text {
        color: #8b8b8b;
    }
}
</style>
